<template>
    <div class="channel-edit">

        <!-- 我的频道 -->
        <van-cell center :border="false">
            <div slot="title" class="channel-title">我的频道</div>
            <van-button
                type="danger"
                plain
                round
                size="mini"
                class="channel-btn"
                @click="isEdit=!isEdit"
            >
                {{isEdit ? "完成" : "编辑"}}
            </van-button>
        </van-cell>

        
        <van-grid :gutter="10">
            <van-grid-item 
                v-for="(item,index) in userChannel" 
                :key="index"  
                :text="item.name" 
                class="grid-item"
                :class="{active: index === active}"
                @click="onUserChannelClick(item,index)"
                :icon="(isEdit && index !== 0) ? 'clear' : ''"
            />
        </van-grid>
        <!-- /我的频道 -->


        <!-- 频道推荐 -->
        <van-cell center :border="false">
            <div slot="title" class="channel-title">频道推荐</div>
            
        </van-cell>

        
        <van-grid :gutter="10">
            <van-grid-item 
                v-for="(items,index) in reChannels" 
                :key="index" 
                :text="items.name" 
                class="grid-item"
                @click="onAdd(items)"
            />
        </van-grid>
        <!-- /频道推荐 -->

    </div>
</template>
<script>
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
import { getAllChannels,addUerChannel,deleteUserChannel } from '@/api/channel'
export default {
    name:'channel-edit',
    data() {
        return {
            allChannels:[],
            isEdit:false,
            isEdit1:false
        }
    },
    methods: {
        async loadAllChannels(){
            const { data } = await  getAllChannels()

            this.allChannels = data.data.channels;
            //console.log(data)
        },
        async onAdd(items){
            this.userChannel.push(items)

            if(this.user){
                const { data } = await addUerChannel({
                    channels:[
                        {id:items.id , seq:this.userChannel.length}
                    ]
                })
                setItem('user-channels',this.userChannel)
                //console.log(data)
            }else{
                setItem('user-channels',this.userChannel)
            }
        },
        onUserChannelClick(item ,index){
            if(this.isEdit && index !== 0){
                this.deleteChannel( item ,index)
            }else{
                this.switchChannel(index)
            }
        },
        async deleteChannel(item,index){

            if(index <= this.active){
                this.$emit('update-active',this.active-1)
            }

            this.userChannel.splice(index,1)

            if(this.user){
                const { data } = await deleteUserChannel(item.id)
                setItem('user-channels',this.userChannel)
                //console.log(data)
            }else{
                setItem('user-channels',this.userChannel)
            }
        },
        switchChannel(index){
            this.$emit('close')
            this.$emit('update-active',index)
        }

    },
    props:{
        userChannel:{
            type:Array,
            required:true
        },
        active:{
            type:Number,
            required:true
        }
    },
    created() {
        this.loadAllChannels()
    },
    computed:{
        reChannels(){
            return this.allChannels.filter(channels=>{
                return !this.userChannel.find(userChannel=>{
                    return userChannel.id === channels.id
                })
            })
        },
        ...mapState(['user'])
    }
}
</script>
<style lang="less" scoped>
    .channel-edit{
        padding-top: 54px;
        .channel-title{
            font-size: 16px;
            color: #333333;
        }
        .channel-btn{
            width: 50px;
        }
        .grid-item{
            width:88px;
            height: 43px;
        }
        /deep/.van-grid-item__content{
            background: #f4f5f6;
        }
        /deep/.van-grid-item__text{
            font-size: 14px;
            color: #222;
            margin-top: 0;
        }
        /deep/.van-grid-item__icon{
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 20px;
            color: #ccc;
        }
        .active{
            /deep/.van-grid-item__text{
                color: red;
            }
        }
    }
</style>